<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Xmee | Login and Register Form Html Templates</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <!-- Fontawesome CSS -->
  <link rel="stylesheet" th:href="@{/css/fontawesome-all.min.css}">
  <!-- Flaticon CSS -->
  <link rel="stylesheet" th:href="@{/css/flaticon.css}">
  <!-- Google Web Fonts -->
  <link th:href="@{/css/css.css}" rel="stylesheet">
  <!-- Custom CSS -->
  <link rel="stylesheet" th:href="@{/css/style.css}">
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="preloader" class="preloader">
  <div class='inner'>
    <div class='line1'></div>
    <div class='line2'></div>
    <div class='line3'></div>
  </div>
</div>
<section class="fxt-template-animation fxt-template-layout30">
  <!-- Star Animation Start Here -->
  <canvas id="canvas"></canvas>
  <!-- Star Animation End Here -->
  <div class="fxt-content">
    <div class="fxt-header">
      <a href="login-30.html" class="fxt-logo"><img th:src="@{/picture/logo-12.png}" alt="Logo"></a>
    </div>
    <div class="fxt-form">
      <p>Register for create an account</p>
      <form method="POST">
        <div class="form-group">
          <div class="fxt-transformY-50 fxt-transition-delay-1">
            <input type="text" id="name" class="form-control" name="name" placeholder="Name" required="required">
          </div>
        </div>
        <div class="form-group">
          <div class="fxt-transformY-50 fxt-transition-delay-1">
            <input type="email" id="email" class="form-control" name="email" placeholder="Email" required="required">
          </div>
        </div>
        <div class="form-group">
          <div class="fxt-transformY-50 fxt-transition-delay-2">
            <input id="password" type="password" class="form-control" name="password" placeholder="******" required="required">
            <i toggle="#password" class="fa fa-fw fa-eye toggle-password field-icon"></i>
          </div>
        </div>
        <div class="form-group">
          <div class="fxt-transformY-50 fxt-transition-delay-3">
            <button type="submit" class="fxt-btn-fill">Register</button>
          </div>
        </div>
      </form>
    </div>
    <div class="fxt-style-line">
      <div class="fxt-transformY-50 fxt-transition-delay-5">
        <h3>Or Login With</h3>
      </div>
    </div>
    <ul class="fxt-socials">
      <li class="fxt-facebook fxt-transformY-50 fxt-transition-delay-6">
        <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
      </li>
      <li class="fxt-twitter fxt-transformY-50 fxt-transition-delay-7">
        <a href="#" title="twitter"><i class="fab fa-twitter"></i></a>
      </li>
      <li class="fxt-google fxt-transformY-50 fxt-transition-delay-8">
        <a href="#" title="google"><i class="fab fa-google-plus-g"></i></a>
      </li>
      <li class="fxt-linkedin fxt-transformY-50 fxt-transition-delay-9">
        <a href="#" title="linkedin"><i class="fab fa-linkedin-in"></i></a>
      </li>
      <li class="fxt-pinterest fxt-transformY-50 fxt-transition-delay-9">
        <a href="#" title="pinterest"><i class="fab fa-pinterest-p"></i></a>
      </li>
    </ul>
    <div class="fxt-footer">
      <div class="fxt-transformY-50 fxt-transition-delay-9">
        <p>Already have an account?<a href="login-30.html" class="switcher-text2 inline-text">Login</a></p>
      </div>
    </div>
  </div>
</section>
<!-- jquery-->
<script th:src="@{/js/jquery-3.5.0.min.js}"></script>
<!-- Bootstrap js -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Imagesloaded js -->
<script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
<!-- Star Animation js -->
<script th:src="@{/js/star-animation.js}"></script>
<!-- Validator js -->
<script th:src="@{/js/validator.min.js}"></script>
<!-- Custom Js -->
<script th:src="@{/js/main.js}"></script>

</body>

</html>